<template>
  <div class="">
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="order_id" label="订单号" />
        <el-table-column prop="script_name" label="拼单剧本" />
        <el-table-column label="价格" width="150" v-slot="{ row }">
          <span>￥{{ row.total_price }}</span>
        </el-table-column>
        <el-table-column label="支付人" v-slot="{ row }">
          <div>
            <el-image
              style="width: 50px; height: 50px; border-radius: 50%"
              :src="URL + '/' + row.avatar"
            />
          </div>
          <span>{{ row.name }}</span>
        </el-table-column>
        <el-table-column label="电话号码" v-slot="{ row }">
          {{ row.phonenumber }}
        </el-table-column>
        <el-table-column prop="pay_time" label="支付时间" />
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
import { reqGetOrder } from "@/api/order/index";
import { ReqGetOrder } from "@/api/order/model";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const page = ref<number>(1);
const pageSize = ref<number>(6);
const total = ref<number>(0);
const tableData = ref<ReqGetOrder[]>([]);

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getOrderList();
};

// 获取订单列表
const getOrderList = async () => {
  let result = await reqGetOrder({
    page: page.value,
    pageSize: pageSize.value,
  });
  total.value = result.count;
  tableData.value = result.rows;
};
onMounted(() => {
  getOrderList();
});
</script>

<style scoped lang="scss"></style>
